import React, { Component } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import Film from '../views/Films';
import NowPlaying from '../views/Films/NowPlaying';
import ComingSoon from '../views/Films/ComingSoon';
import FilmDetail from '../views/Films/Detail';
import Cinema from '../views/Cinema';
import Center from '../views/Center';
import Login from '../views/Login';
import NotFound from '../views/NotFound';

import Auth from './Auth';

export default class index extends Component {
  render() {
    return (
      <>
        <Routes>
          <Route
            path="/login"
            element={<Login />}
          />
          <Route
            path="/film/*"
            element={<Film />}
          >
            <Route
              path="nowPlaying"
              element={<NowPlaying />}
            />
            <Route
              path="comingSoon"
              element={<ComingSoon />}
            />
            {/* 动态路由 */}
            <Route
              path="detail/:id"
              element={<FilmDetail />}
            />
            <Route
              index
              element={<Navigate to="/film/nowPlaying" />}
            />
          </Route>
          <Route
            path="/cinema"
            element={<Cinema />}
          />
          <Route
            path="/center"
            element={
              <Auth>
                <Center />
              </Auth>
            }
          />

          {/* 重定向 Navigate */}
          <Route
            index
            element={<Navigate to="/film" />}
          />
          {/* 404 */}
          <Route
            path="*"
            element={<NotFound />}
          />
        </Routes>
      </>
    );
  }
}
